<template>
  <!-- 流转卡拆分 -->
  <div class="main-container" id="main-container">
    <div style="background: #fff; height: 100%" id="circulCardSplit">
      <PageTabelLayout>
        <template #pageHeader>
          <div class="my-header" v-if="headerShow">
            <a-form size="small" :model="circulForm" layout="inline" auto-label-width>
              <a-form-item label-col-flex="80px" label="流转卡号">
                <a-select popup-container="html" style="width:182px" class="bacClass" v-model="circulForm.flowCardCode"
                          @focus="focusSel4" @search="handleSearch4" @change="cardChange" :loading4="loading4"
                          allow-clear allow-search>
                  <a-option v-for="item in pageData.cardList" :value="item.flowCardCode">
                    {{ item.flowCardCode }}
                  </a-option>
                </a-select>
                <a-button class="bacClass" @click="codeClick">
                  <template
                      #icon>
                    <icon-search/>
                  </template>
                </a-button>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="开单日期">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.createOrderTime"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="客户名称">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.customName"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="作业类型">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.dyeingType"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="计划单号">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.orderCode"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="客户订单号">
                <a-input style="width:196px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.customOrderCode"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="加工类型">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.machinType"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="设备编号">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.machineCode"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="色称">
                <a-input style="width:237px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.colorName"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="色号">
                <a-input style="width:237px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.colorCode"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="交货日期">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.deliveryTime"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="对色资料">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.contrastColor"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="确认色">
                <a-input style="width:224px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.affirmColor"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="对色光源">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.coloringIlluminant"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="等待工序">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear v-model="circulForm.ddgx"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="客户要求">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.customeRequire"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="送货地址">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.deliveryAddress"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="生产流程">
                <a-input style="width:210px;color:#4e5969 !important" disabled allow-clear
                         v-model="circulForm.hqCraft"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="拆分类型">
                <!-- <a-input style="width:200px" disabled class="aInputWidth" allow-clear /> -->
                <a-select popup-container="html" style="width:210px" class="bacClass" allow-clear @focus="selectChange"
                          allow-search @search="seatchHandler($event, 0)" v-model="circulForm.cfly">
                  <a-option v-for="item in pageData.splitTypeList" :key="item.id"
                            :value="item.splitType">{{
                      item.splitType
                    }}
                  </a-option>
                </a-select>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="拆单原因" field="splitCause">
                <a-input style="width:210px" class="bacClass" allow-clear v-model="circulForm.cdyy"/>
              </a-form-item>
              <a-form-item label-col-flex="80px" label="备注">
                <a-input style="width:545px" class="bacClass" allow-clear v-model="circulForm.remark"/>
              </a-form-item>
            </a-form>
          </div>
          <div class="my-divisders">
            <a-divider orientation="center">
              <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18"/>
              <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18"/>
            </a-divider>
          </div>
          <div class="my-tool-bar" style="margin-bottom: 10px;">
            <Toolbar :items="['拆分', '保存']" @saveData="saveHandler" @split="splitHandler"/>
          </div>
        </template>
        <template #pageTabel>
          <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                             :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                             style="height:calc(100% - 45px)" class='ag-theme-alpine' :defaultColDef="defaultColDef"
                             :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                             @columnResized="onColumnResized" @columnMoved="onColumnMoved">
            </AgGridVuesCopys>
          </a-spin>
        </template>
        <!-- <paginationCopys :total="total" show-total show-jumper
            show-page-size @change="changePage"
            @page-size-change="changeSize"
            style="justify-content: center"
            :page-size="pagination.pageSize"
            :current="pagination.page" /> -->
      </PageTabelLayout>
    </div>

    <a-modal v-model:visible="isShowModal" title="拆分类型" width="200" @cancel="isShowModal = false"
             @before-ok="handleBeforeOk">
      <div>
        <p>是否拆分</p>
        <a-radio-group direction="vertical" v-model:model-value="circulStatus">
          <a-radio :value="1">回修</a-radio>
          <a-radio :value="2">退库</a-radio>
        </a-radio-group>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import {reactive, ref, onMounted} from 'vue'
import emitter from "@/hooks/useEventBus";
;
import {useTable, usePagination} from '@/hooks/table'
import {localeText} from '@/api/aggridZw'
import {circulFormInterface} from '@/interface/circulSplit';
import {circulat} from '@/api/DyeingshopManagement/circulatCardSplit'
import {selectDataFn} from '@/api/DyeingshopManagement/getOrderFn';
import {Message} from '@arco-design/web-vue';
import {saveOrUpdateGridState as saveOrUpdateGridState01} from '@/hooks/useGridState'
import {post} from '@/api/http'

export default {
  components: {PageTabelLayout, },
  name: 'circulCardSplit',
  setup() {
    const pageLoading = ref<boolean>(false)
    const circulatApi = circulat();
    let headerShow = ref<boolean>(true);
    let isShowModal = ref<boolean>(false);
    let circulStatus = ref<number>(0);
    let changHeadShow = (boolVal: boolean) => {
      headerShow.value = boolVal;
      emitter.emit('window-change');
    };
    const circulForm = reactive<circulFormInterface>({
      createOrderTime: '',
      customName: '',
      dyeingType: '',
      orderCode: '',
      customOrderCode: '',
      machinType: '',
      machineCode: '',
      colorName: '',
      colorCode: '',
      deliveryTime: '',
      contrastColor: '',
      affirmColor: '',
      coloringIlluminant: '',
      ddgx: '',
      customeRequire: '',
      deliveryAddress: '',
      hqCraft: '',
      cfly: '',
      cdyy: '',
      remark: '',
      flowCardCode: '',
      greyInfo: [],
    });
    const searchFlow = async (code: any) => {
      pageLoading.value = true
      updateGridState01()
      //  console.log(code);
      if (code) {
        await circulatApi.getFlowCode({flowCardCode: code}).then((res: any) => {
          if (res.code === 200) {
            let data = res.data;
            for (let key in data) {
              circulForm[key] = data[key]
            }
            ;
            table.handleSuccess(data.greyInfo);
            gridOption.value.setRowData(data.greyInfo);
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            });
          }
        }).catch(err => {
          pageLoading.value = false
          console.log(err)
        })
      } else {
        Message.warning('请先选择流转卡号！')
        return
      }

    };
    const pageData = reactive<{
      splitTypeList: any[],
      cardList: any[],
    }>({
      splitTypeList: [],
      cardList: [],
    })
    //下拉数据
    const options = ref<any>();
    const loading = ref(false);
    const seatchHandler = async (value: any, index: number) => {
      if (value) {
        loading.value = true;
        await selectChange(index, value, (data: any) => {
          options.value = data;
        });
        loading.value = false;
      } else {
        options.value = [];
      }
    };
    const selectChange = async (selectIndex: number, value: any = "", cb = (data: any) => {
      return data;
    }) => {
      //获取拆分类型下拉列表信息数据
      await selectDataFn().getSplitTypeList({splitType: value}).then((res: any) => {
        //    console.log(res);
        if (res.code === 200) {
          pageData.splitTypeList = res.data;
        }
      })
      // await labOtherFn().getCirculDropList({ flowCardCode: value, }).then((res:any) => {
      //     if (res.code === 200) {
      //         pageData.splitTypeList = res.data;
      //         cb(res.data);
      //     } else {

      //     }
      // });
    };

    const saveHandler = async () => {

    };
    const splitHandler = () => {
      if (circulForm.cdyy) {
        isShowModal.value = true
      } else {
        Message.error({
          content: "请填写拆分原因",
          duration: 5000,
        });
      }
    };
    const handleBeforeOk = async () => {
      // await circulatApi.saveToSplit({ flowCardCode: code }).then((res: any) => {
      //         if (res.code === 200) {
      //             let data = res.data;
      //             table.handleSuccess(data.greyInfo);
      //             gridOption.value.setRowData(data.greyInfo);
      //         } else {
      //             Message.error({
      //                 content: res.message,
      //                 duration: 5000,
      //             });
      //         }
      //     }).catch(err => {
      //         pageLoading.value = false
      //         console.log(err)
      //     })
      isShowModal.value = false
    }
    const table = useTable();
    //表格方面
    const gridOption = ref();
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      colState.value = params.columnApi
      //调整表格自适应大小
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 150,
    };
    // const pagination = usePagination(doRefresh);
    let cfsValue: any[] = [
      // {
      //     headerName:'序号',
      //     field:''
      // },
      {
        headerName: '入库日期',
        field: 'storageReceiptTime'
      },
      {
        headerName: '流转卡号',
        field: 'flowCardCode'
      },
      {
        headerName: '客户名称',
        field: 'customName'
      },
      {
        headerName: '收料单号',
        field: 'shelvesCode'
      },
      {
        headerName: '送货单位',
        field: 'deliveryCompany'
      },
      {
        headerName: '计划单号',
        field: 'planOrderCode'
      },
      {
        headerName: '托盘编号',
        field: 'storageReceiptCode'
      },
      {
        headerName: '织造序号',
        field: 'weaveCode'
      },
      {
        headerName: '条形码',
        field: 'barCode'
      },
      {
        headerName: '匹号',
        field: 'houseNo'
      },
      {
        headerName: '坯布编号',
        field: 'greyCode'
      },
      {
        headerName: '坯布名称',
        field: 'greyName'
      },
      {
        headerName: '色称',
        field: 'colorName'
      },
      {
        headerName: '门幅',
        field: 'efficacious'
      },
      {
        headerName: '克重',
        field: 'gramWeight'
      },
      {
        headerName: '纱批',
        field: 'yarnNo'
      },
      {
        headerName: '等级',
        field: 'level'
      },

    ]
    let a = [{
      showRowGroup: 'hide_def',
      "headerName": "",
      "checkboxSelection": true,
      "headerCheckboxSelection": true,
      "pinned": "left",
      "width": 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: "left",
    }]
    cfsValue = a.concat(cfsValue);
    // const total = ref(10);
    // const changePage = (val:any) => {
    //     pagination.page = val
    //     doRefresh();
    // }
    // const changeSize = (val:any) => {
    //     pagination.pageSize = val
    //     doRefresh();
    // }
    const localeTextData: any = ref(localeText);
    const {saveGridState: saveGridState01, updateGridState: updateGridState01} = saveOrUpdateGridState01('circulCardSplit01', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }

    //下拉框  流程卡号
    const focusSel4 = () => {
      selCxAll4({"flowCardCode": ""});
    }
    const options4 = ref<any>(pageData.cardList);
    const loading4 = ref(false);
    const handleSearch4 = (value: any) => {
      if (value) {
        const ob = {flowCardCode: value}
        loading4.value = true;
        selCxAll4(ob);
        options4.value = pageData.cardList;
        loading4.value = false;
      } else {
        options4.value = []
      }
    };

    function selCxAll4(val: any) {
      post({
        url: "aps/circulatCard/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.cardList = data;
        } else {
        }
      });
    }

    function codeClick() {
      searchFlow(circulForm.flowCardCode)
    }

    return {
      codeClick,
      focusSel4,
      handleSearch4,
      selCxAll4,
      options4,
      loading4,
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      pageLoading,
      changHeadShow,
      headerShow,
      // selectHandler,
      saveHandler,
      splitHandler,
      circulForm,
      table,
      pageData,
      // changePage,
      // changeSize,
      localeTextData,
      defaultColDef,
      gridReady,
      cfsValue,
      // total,
      isShowModal,
      circulStatus,
      handleBeforeOk,
      searchFlow,
      selectChange,
      seatchHandler,
      options,
    }
  },
}
</script>
<style lang="less" scoped>
.main-container {
  height: 100%;
}

.arco-drawer-header .arco-drawer-title {
  width: 100%;
}

.aInput {
  background: #fff;
  width: 270px;
  border: 1px solid #c9cdd3;
}

.aInputWidth {
  width: 270px;
}

:deep(.arco-input-wrapper .arco-input[disabled]) {
  -webkit-text-fill-color: #000 !important;
}

.my-header {
  margin-top: 10px;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

.aInputLine {
  border: 1px solid #c9cdd3;
  background: #fff;
}

.input-demo bacClass {
  border-right: 1px solid #dde2eb;
}

.input-demo {
  border-right: 1px solid #dde2eb;
}
</style>